<template>
  <div>
    <ht-table
      ref="htTable"
      :data="rows"
      :pageResult="pagination"
      :selection="true"
      quick-search-props="id"
      :show-export="false"
      :show-custom-column="false"
      @loading="loadData"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <el-button size="small" @click="showDialog()" icon="el-icon-plus">添加</el-button>
          <el-button
            v-popconfirm="{ before: removeValid, confirm: handleRemove }"
            type="danger"
            icon="el-icon-delete"
          >删除</el-button>
        </el-button-group>
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="id"
          label="主键"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link
              type="primary"
              @click="showDialog(row.id)"
              title="查看详情"
            >{{row.id}}</el-link>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="refId"
          label="外键"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="dxwb"
          label="单行文本"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="dxwbk"
          label="多行文本框"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="sm"
          label="说明"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="sz"
          label="数字"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="dxk"
          label="单选框"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="fxk"
          label="复选框"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="zrq"
          label="长日期"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="drq"
          label="短日期"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="sj"
          label="时间"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="xzq"
          label="选择器"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="xzqid"
          label="选择器id"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="dhk"
          label="对话框"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="xlk"
          label="下拉框"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="fj"
          label="附件"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="kg"
          label="开关"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="sjzd"
          label="数据字典"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="bq"
          label="标签"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="pf"
          label="评分"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="tp"
          label="图片"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="bjtp"
          label="背景图片"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="srjy"
          label="输入建议"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="hk"
          label="滑块"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="ksrq"
          label="开始日期"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="jsrq"
          label="结束日期"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="rqjs"
          label="日期计算"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="rqfw"
          label="日期范围"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="sjfw"
          label="时间范围"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="fwb"
          label="富文本"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="an"
          label="按钮"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="lcb"
          label="里程碑"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="jl"
          label="级联"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="iframe"
          label="iframe"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="ewm"
          label="二维码"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="gddt"
          label="高德地图"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="zb"
          label="坐标"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="tb"
          label="图表"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="xls"
          label="下拉树"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="xlsid"
          label="下拉树id"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="fFormDataRev"
          label="表单数据版本"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
      </template>
    </ht-table>
    <WBdkj-manager-edit ref="WBdkjManagerEdit"></WBdkj-manager-edit>
  </div>
</template>
<script>
import WBdkjManagerEdit from "./WBdkjManagerEdit.vue";
import api from "@/api/WBdkj.js"
export default {
  name: 'WBdkjManager', 
  components:{WBdkjManagerEdit},
  data() {
    return {
      dialogVisible: false,
      rows: [],
      pagination: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      WBdkj: {},
      saveMethod: "POST"
    };
  },
  computed: {
	tableHeight() {
	  return this.$baseTableHeight()
	},
  },
  methods: {
    showDialog(id) {
      this.$refs.WBdkjManagerEdit.showDialog(id);
    },
    loadData(param, cb) {
      api.loadData(param||{}).then(
        (resp) => {
          let response = resp.data || resp
          this.rows = response.rows
          this.total = response.total
          this.pagination = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        }
      )
      .finally(() => cb && cb());
    },
    removeValid() {
        if (this.$refs.htTable.selection.length == 0) {
          this.$message({ message: '请至少选择一条记录', type: 'warning' })
          return false
        }
        return true
      },
      handleRemove() {
        const ids = []
        this.$refs.htTable.selection.forEach((item) => {
          ids.push(item.id)
        })
        api.deleteByIds(ids.join(',')).then(() => {
          this.loadData()
        })
      },
  }
};
</script>
